<template>
  <div>
    <div class="g-cur">
      <div class="wp">
        <NuxtLink to="/" class="a">个人中心</NuxtLink><span> / </span><span class="s">我的资产</span>
      </div>
    </div>
    <div class="wp">
      <div class="m-assetsl">
        <div class="m-titl1">我的资产</div>
        <ul class="ul-listl1">
          <li :class="{ on: 0 === act }" @click="act = 0">
            <div class="con">资产收益</div>
          </li>
          <li :class="{ on: 1 === act }" @click="act = 1">
            <div class="con">资产列表</div>
          </li>
          <li :class="{ on: 2 === act }" @click="act = 2">
            <div class="con">资产购买记录</div>
          </li>
        </ul>
        <div class="m-propertyl" v-if="act === 0">
          <div class="m-incomel">
            <div class="tit">资产收益金额</div>
            <NuxtLink to="/withdrawalRecord" class="log"><i></i>提现记录</NuxtLink>
            <div class="balance">
              可用余额：<span class="num">{{ totalObj.unlockEarnings }}<em class="em">USD</em></span>
              <div class="btn">余额提现</div>
            </div>
            <div class="total">
              <div class="num">{{ totalObj.totalEarnings }}</div>
              <div class="tt">分成总额（USD）</div>
            </div>
          </div>
          <div class="m-withdrawall">
            <div class="record">
              <div class="ll">资产收益明细</div>
              <div class="m-selectl">
                <a-select ref="select" v-model:value="TimeType" style="width: 200px" @change="setTimeout()">
								<a-select-option value="7">近7天</a-select-option>
								<a-select-option value="15">近半个月</a-select-option>
								<a-select-option value="30">近一个月</a-select-option>
								<a-select-option value="90">近三个月</a-select-option>
							</a-select>
              </div>
            </div>
            <div class="m-tablel l2">
              <a-table :dataSource="data.dataSource" :columns="data.columns" :pagination="false" :scroll="{ x: 1300 }" v-if="data.dataSource.length>0">
                <template #bodyCell="{ column , record }">
                  <template v-if="column.key === 'state'">
                    <div :class="record.color">{{record.state}}<i class="icon" v-if="record.color=='red'"></i></div>
                  </template>
                  <template v-if="column.key === 'createdAt'">
                   {{ timeFormat(record.book?.createdAt,0) }}
                  </template>
                  <template v-if="column.key === 'books'">
                   {{ record.book?.title}}
                  </template>
                </template>
              </a-table>
              <empty-sty v-else />
            </div>
            <div class="m-pages">
              <a-pagination v-model:current="current1" show-quick-jumper :total="total1" @change="onChange1" />
            </div>
          </div>
        </div>
        <div class="m-propertyl" v-if="act === 1">
          <div class="m-searchl">
            <div class="ll">
              <div class="icn"><img src="/images/jl-i01.png" alt="" /></div>
              <a-input-search
                v-model:value="formState2.q"
                placeholder="输入书籍名称/作者"
                enter-button="搜索"
                allowClear="true"
                @search="getList2"
              />
            </div>
            <div class="m-selectl">
              <a-select
                ref="select"
                v-model:value="formState2.level"
                 @change='getList2()'
                style="width: 200px"
              >
                <a-select-option value="GOLD">GOLD</a-select-option>
                <a-select-option value="SILVER">SILVER</a-select-option>
                <a-select-option value="COPPER">COPPER</a-select-option>
                <a-select-option value="BLUE">BLUE</a-select-option>
              </a-select>
            </div>
          </div>
          <div class="m-listl">
            <ul class="ul-listl2" v-if="listl1.length>0">
              <li v-for="(item,index) in listl1" :key="index">
                <div @click="gotoDetail(item)"  class="con">
                  <div class="icon">
                    <img :src="item.icon" alt="">
                  </div>
                  <div class="pic">
                    <img :src="item.src" alt="">
                  </div>
                  <div class="txt">
                    <div class="tit">{{item.tit}}</div>
                    <div class="desc">{{item.desc}}</div>
                    <div class="info">
                      <div class="headpic">
                        <img :src="item.headpic" alt="">
                      </div>
                      <div class="rr">
                        <div class="stit">{{item.stit}}</div>
                        <div class="snum">{{item.snum}}</div>
                      </div>
                    </div>
                    <div class="num">版权价格：<span>{{item.num}}</span></div>
                  </div>
                </div>
              </li>
            </ul>
            <empty-sty v-else />
            <div class="m-pages">
              <a-pagination v-model:current="current2" show-quick-jumper :total="total2" @change="onChange2" />
            </div>
          </div>
        </div>
        <div class="m-propertyl" v-if="act === 2">
          <div class="m-withdrawall l2">
            <div class="record">
              <div class="ll">购买明细</div>
              <div class="m-selectl">
                <a-select
                  ref="select"
                  v-model:value="formState3.level"
                  @change='getList3()'
                  style="width: 200px"
                >
                <a-select-option value="GOLD">GOLD</a-select-option>
                <a-select-option value="SILVER">SILVER</a-select-option>
                <a-select-option value="COPPER">COPPER</a-select-option>
                <a-select-option value="BLUE">BLUE</a-select-option>
                </a-select>
              </div>
            </div>
            <div class="m-tablel l2">
              <a-table :dataSource="data2.dataSource" :columns="data2.columns" :pagination="false" :scroll="{ x: 750 }" v-if="data2.dataSource.length>0">
                <template #bodyCell="{ column , record }">
                  <template v-if="column.key === 'state'">
                    <div :class="record.color">{{record.state}}<i class="icon" v-if="record.color=='red'"></i></div>
                  </template>
                  <template v-if="column.key === 'updatedAt'">
                   {{ timeFormat(record.updatedAt,0) }}
                  </template>
                  <template v-if="column.key === 'books'">
                   {{record.cluster?.book?.title }}
                  </template>
                </template>
              </a-table>
              <empty-sty v-else />
            </div>
            <div class="m-pages">
              <a-pagination v-model:current="current3" show-quick-jumper :total="total3" @change="onChange3" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  

</template>
<script setup>

import { reactive, ref, onMounted } from 'vue';
import {RouterLink, RouterView, useRouter} from 'vue-router'
import request from '~/services/request'
import { message } from 'ant-design-vue';
import Cookies from 'js-cookie';
const router = useRouter()
const value = ref('');
const totalObj=ref({})
const value1 = ref('近7天');
const value2 = ref('金浆果');
const value3 = ref('金浆果');
const data = ref({
  dataSource: [
    {
      key: '1',
      time:'2024/06/10 11:40:19',
      books:'汉字的历史',
      acc:'100',
      income:'80',
      total:'80',
      amount:'50%',
      silver:'80',
      price:'80',
      copper:'80',
      price2:'80',
      Blueberries:'80',
      price3:'80',
      Blueberries2:'80',
      price4:'80',
    },{
      key: '2',
      time:'2024/06/10 11:40:19',
      books:'汉字的历史',
      acc:'100',
      income:'80',
      total:'80',
      amount:'50%',
      silver:'80',
      price:'80',
      copper:'80',
      price2:'80',
      Blueberries:'80',
      price3:'80',
      Blueberries2:'80',
      price4:'80',
    },{
      key: '3',
      time:'2024/06/10 11:40:19',
      books:'汉字的历史',
      acc:'100',
      income:'80',
      total:'80',
      amount:'50%',
      silver:'80',
      price:'80',
      copper:'80',
      price2:'80',
      Blueberries:'80',
      price3:'80',
      Blueberries2:'80',
      price4:'80',
    },{
      key: '4',
      time:'2024/06/10 11:40:19',
      books:'汉字的历史',
      acc:'100',
      income:'80',
      total:'80',
      amount:'50%',
      silver:'80',
      price:'80',
      copper:'80',
      price2:'80',
      Blueberries:'80',
      price3:'80',
      Blueberries2:'80',
      price4:'80',
    },{
      key: '5',
      time:'2024/06/10 11:40:19',
      books:'汉字的历史',
      acc:'100',
      income:'80',
      total:'80',
      amount:'50%',
      silver:'80',
      price:'80',
      copper:'80',
      price2:'80',
      Blueberries:'80',
      price3:'80',
      Blueberries2:'80',
      price4:'80',
    },{
      key: '6',
      time:'2024/06/10 11:40:19',
      books:'汉字的历史',
      acc:'100',
      income:'80',
      total:'80',
      amount:'50%',
      silver:'80',
      price:'80',
      copper:'80',
      price2:'80',
      Blueberries:'80',
      price3:'80',
      Blueberries2:'80',
      price4:'80',
    },{
      key: '7',
      time:'2024/06/10 11:40:19',
      books:'汉字的历史',
      acc:'100',
      income:'80',
      total:'80',
      amount:'50%',
      silver:'80',
      price:'80',
      copper:'80',
      price2:'80',
      Blueberries:'80',
      price3:'80',
      Blueberries2:'80',
      price4:'80',
    },{
      key: '8',
      time:'2024/06/10 11:40:19',
      books:'汉字的历史',
      acc:'100',
      income:'80',
      total:'80',
      amount:'50%',
      silver:'80',
      price:'80',
      copper:'80',
      price2:'80',
      Blueberries:'80',
      price3:'80',
      Blueberries2:'80',
      price4:'80',
    },{
      key: '9',
      time:'2024/06/10 11:40:19',
      books:'汉字的历史',
      acc:'100',
      income:'80',
      total:'80',
      amount:'50%',
      silver:'80',
      price:'80',
      copper:'80',
      price2:'80',
      Blueberries:'80',
      price3:'80',
      Blueberries2:'80',
      price4:'80',
    }
  ],

  columns: [
    {
      title: '时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
    },
    {
      title: '书籍名称',
      dataIndex: 'books',
      key: 'books',
    },
    {
      title:'NFT等级',
      dataIndex: 'level',
      key: 'level',
    },
    {
      title:'售价(USD)',
      dataIndex: 'price',
      key: 'price',
    },
    {
      title:'金浆果持有收益(USD)',
      dataIndex: 'goldHoldEarnings',
      key: 'goldHoldEarnings',
    },
    {
      title:'银浆果持有收益(USD)',
      dataIndex: 'silverHoldEarnings',
      key: 'silverHoldEarnings',
    },
    {
      title:'铜浆果持有收益(USD)',
      dataIndex: 'copperHoldEarnings',
      key: 'copperHoldEarnings',
    },
    {
      title:'蓝莓持有收益(USD)',
      dataIndex: 'blueHoldEarnings',
      key: 'blueHoldEarnings',
    },
  ],
});

const act = ref(0);

const listl1 = ref([])

const data2 = ref({
  dataSource: [
    {
      key: '1',
      time:'2024/06/10 11:40:19',
      books:'汉字与中华文化十讲',
      level:'金浆果',
      num:'80',
      price:'80',
    },{
      key: '2',
      time:'2024/06/10 11:40:19',
      books:'汉字与中华文化十讲',
      level:'银浆果',
      num:'80',
      price:'80',
    },{
      key: '3',
      time:'2024/06/10 11:40:19',
      books:'汉字与中华文化十讲',
      level:'铜浆果',
      num:'80',
      price:'80',
    },{
      key: '4',
      time:'2024/06/10 11:40:19',
      books:'汉字与中华文化十讲',
      level:'银浆果',
      num:'80',
      price:'80',
    },{
      key: '5',
      time:'2024/06/10 11:40:19',
      books:'汉字与中华文化十讲',
      level:'金浆果',
      num:'80',
      price:'80',
    },{
      key: '6',
      time:'2024/06/10 11:40:19',
      books:'汉字与中华文化十讲',
      level:'银浆果',
      num:'80',
      price:'80',
    },{
      key: '7',
      time:'2024/06/10 11:40:19',
      books:'汉字与中华文化十讲',
      level:'铜浆果',
      num:'80',
      price:'80',
    },{
      key: '8',
      time:'2024/06/10 11:40:19',
      books:'汉字与中华文化十讲',
      level:'银浆果',
      num:'80',
      price:'80',
    },
  ],

  columns: [
    {
      title: '时间',
      dataIndex: 'updatedAt',
      key: 'updatedAt',
    },
    {
      title: '资产书籍名称',
      dataIndex: 'books',
      key: 'books',
    },
    {
      title: '版权等级',
      dataIndex: 'level',
      key: 'level',
    },
    {
      title: '购买数量',
      dataIndex: 'amount',
      key: 'amount',
    },
    {
      title: '购买金额（USD）',
      dataIndex: 'price',
      key: 'price',
    }
  ],
});
function gotoDetail(item){
  router.push('/details?id='+item.id)
}
function timeFormat(time, type) {
  if(time){
    time=new Date(time)
  }
	// 获取当前日期
	const now = new Date();
	// 近七天
	const last7Days = new Date(now.getTime() - (7 * 24 * 60 * 60 * 1000));

	// 近半个月
	const last15Days = new Date(now.getTime() - (15 * 24 * 60 * 60 * 1000));

	// 近一个月
	const last30Days = new Date(now.getTime() - (30 * 24 * 60 * 60 * 1000));

	// 近三个月
	const last90Days = new Date(now.getTime() - (90 * 24 * 60 * 60 * 1000));

	// 使用Intl.DateTimeFormat格式化日期
	const dateFormatter = new Intl.DateTimeFormat('en-ca', {
		year: 'numeric',
		month: '2-digit',
		day: '2-digit',
		dataStyle: 'short',
	});
	const dateFormatterLong = new Intl.DateTimeFormat('zh-CN', {
		year: 'numeric',
		month: '2-digit',
		day: '2-digit',
		dataStyle: 'short',
		hour: '2-digit',
		minute: '2-digit',
		second: '2-digit',
	});

	// 格式化日期
	const formattedLast7Days = dateFormatterLong.format(last7Days).replace(/\//g, '-');
	const formattedLast15Days = dateFormatterLong.format(last15Days).replace(/\//g, '-');
	const formattedLast30Days = dateFormatterLong.format(last30Days).replace(/\//g, '-');
	const formattedLast90Days = dateFormatterLong.format(last90Days).replace(/\//g, '-');
	if (type == 0) {
		return dateFormatterLong.format(time).replace(/\//g, '-')
	} else if (type == 1) {
		return dateFormatterLong.format().replace(/\//g, '-')
	} else if (type == 7) {
		return formattedLast7Days
	} else if (type == 15) {
		return formattedLast15Days
	} else if (type == 30) {
		return formattedLast30Days
	} else if (type == 90) {
		return formattedLast90Days
	}
}
const TimeType = ref('7');
// 页码
const current1 = ref(1);
const total1 = ref(1);
const formState1 = reactive({
  skip: (current1.value - 1) * 10,
  take: 10,
  sort:'updatedAt_desc',
  endTime:timeFormat('',1),
	startTime:timeFormat('',TimeType.value),
});
const onChange1 = (page) => {
  current1.value = page
  formState.skip = (current1.value - 1) * 10
  getList1()
};
function setTimeout(){
  formState1.startTime=timeFormat('',TimeType.value)
  getList1()
}
function getList1(){
  request.get_earnings_assets(formState1).then(res=>{
    data.value.dataSource=res.results
    total1.value=res.total
})
}
// 页码
const current2 = ref(1);
const total2 = ref(1);
const formState2 = reactive({
  skip: (current2.value - 1) * 10,
  take: 10,
  sort:'updatedAt_desc',
  level:'GOLD',
});
const onChange2 = (page) => {
  current2.value = page
  formState2.skip = (current2.value - 1) * 10
  getList2()
};
function getList2(){
  if(!formState2.q){
    delete formState2.q
  }
  request.get_spore_my_buy_log(formState2).then(res=>{
    data2.value.dataSource=res.results
    total2.value=res.total
})
}
// 页码
const current3 = ref(1);
const total3 = ref(1);
const formState3 = reactive({
  skip: (current2.value - 1) * 10,
  take: 10,
  sort:'updatedAt_desc',
  level:'GOLD',
});
const onChange3 = (page) => {
  current3.value = page
  formState3.skip = (current3.value - 1) * 10
  getList3()
};
function getList3(){
  request.get_spore_my(formState3).then(res=>{
   listl1.value=res.results.map(item=>{
    return {
    icon:item.level&&item.level=='GOLD'?'/images/b-i1.png':(item.level=='SILVER'?'/images/b-i2.png':(item.level=='COPPER'?'/images/b-i3.png':(item.level=='BLUE'?'/images/b-i4.png':undefined))),
    //src:item.cluster?.book?.bannerImages[0],
    src:'/images/imgl1.jpg',
    tit:item.cluster?.book?.title,
    desc:item.cluster?.book?.description,
    stit:'郭玉增',
    snum:'#CF182918201201212…',
    num:'1.25 USD',
    }
   })
    total3.value=res.total
})
}
onMounted(()=>{
  if (!Cookies.get('user-data')) {
    message.error({
      content: () => '请先登录！',
      class: 'custom-class',
      style: {
        marginTop: '20vh',
      },
    });
    router.push('/login')
    return false
  }
  request.get_assetsTotal().then(res=>{
    totalObj.value=res
  })
  getList1()
  getList2()
  getList3()
})
</script>
<style>
body{
  background: #f5f5f5;
}
</style>

